@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/activity/details.css')}}">

@section('content')
<div class="main" id="actdetails">
    <div class="details_left">
        <div class="details_left_header">
            <img :src="detailsData.thumb">
            <div class="details_left_headerDiv">
                <span class="detailsTitle">
                    @{{detailsData.title}}
                </span>
                <p class="detailsMain">
                    <span>
                        <img src="{{URL::asset('./img/icon/timered.png')}}">
                        @{{detailsData.start_at}} 开始
                    </span>
                    <span>
                        <img src="{{URL::asset('./img/icon/monyred.png')}}">
                        ￥@{{detailsData.cost}}
                    </span>
                    <span>
                        <img src="{{URL::asset('./img/icon/eyered.png')}}">
                        @{{detailsData.view}}
                    </span>
                    <span>
                        <img src="{{URL::asset('./img/icon/childred.png')}}">
                        @{{detailsData.number}} 人
                    </span>
                </p>
                <button @click="checkLogin">
                    在线报名
                </button>
            </div>
        </div>
        <div class="details_left_main">
            <div class='leftMainTitle'>
                <span>活动信息</span>
            </div>
            <div class="leftMainTable">
                <table style="width:100%">
                    <tr class='cc'>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/sponsorGray.png')}}">
                            主办方
                        </td>
                        <td>@{{detailsData.sponsor}}</td>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/monyGray.png')}}">
                            活动费用
                        </td>
                        <td style="white-space: nowrap;">@{{detailsData.cost}}元</td>
                    </tr>
                    <tr>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/timeGray.png')}}">
                            活动时间
                        </td>
                        <td>@{{detailsData.start_at}} —— @{{detailsData.end_at}}</td>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/timeGray.png')}}">
                            报名截止
                        </td>
                        <td style="white-space: nowrap;"> @{{detailsData.enroll_at}}</td>
                    </tr>
                    <tr class='cc'>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/classifyGray.png')}}">
                            活动分类
                        </td>
                        <td>@{{detailsData.cate_pid?detailsData.cate_pid.name:''}} — @{{detailsData.cate_id?detailsData.cate_id.name:''}}</td>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/childGray.png')}}">
                            参加人数
                        </td>
                        <td>@{{detailsData.limit}}人</td>
                    </tr>
                    <tr>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/adderGray.png')}}">
                            活动地点
                        </td>
                        <td>@{{detailsData.place}}</td>
                        <td class='th'>
                            <img src="{{URL::asset('./img/icon/stateGray.png')}}">
                            活动状态
                        </td>
                        <td>@{{detailsData.act_state}}</td>
                    </tr>
                </table>
            </div>
            <div class="leftMainContent" v-html="detailsData.content">
            </div>
            <!-- <div class='leftMainTitle'>
                <span>活动日程</span>
            </div>
            <div class='leftMainFooter'>
                <p>时间：6月12日9:00-16:30（9:00-9:15 签到）</p>
                <p>
                    费用：3000元/人，含午餐
                </p>
            </div> -->
        </div>
    </div>
    <div class="details_right">
        <div class="detialsRightStore">
            <div class='detialsRightTitle'>
                <img src="{{URL::asset('./img/icon/sponsor.png')}}">
                活动主办方
            </div>
            <div class='detialsRightMain' v-if="detailsData.source==2">
                <div class="detialsRightMain_store">
                    <img :src="detailsDataStore.logo">
                    <div class="storeDetails">
                        <p>@{{detailsDataStore.store_name}}
                            <img v-if="detailsDataStore.quality==2" src="{{URL::asset('./img/icon/attention.png')}}">
                            <img v-if="detailsDataStore.hot==2" src="{{URL::asset('./img/icon/hot.png')}}">
                        </p>
                        <p class="storeCollect" @click="setCollect(detailsDataStore.id)" :class="{active:detailsDataStore.store_collect==2}">
                            <span v-if="detailsDataStore.store_collect==1">
                                <img src="{{URL::asset('./img/store/storeCollectFalse.png')}}" alt="">收藏
                            </span>
                            <span v-if="detailsDataStore.store_collect==2">
                                已收藏
                            </span>
                            <span class="storeCollectNum">@{{detailsDataStore.collections}}</span>
                        </p>
                        <p class="addrS">
                            <img src="{{URL::asset('./img/icon/addr.png')}}">
                            @{{detailsDataStore.area_info}}
                        </p>
                        <p class="detialsss">
                            <span>
                                <img src="{{URL::asset('./img/icon/telmini.png')}}">
                                @{{detailsDataStore.call}}
                            </span>
                            <span style="color:#999999">
                                <img src="{{URL::asset('./img/icon/praise.png')}}">
                                @{{detailsDataStore.credit}}%
                            </span>
                        </p>
                    </div>
                </div>
                <div class="goodAt" v-if="detailsDataStore.cate_id">
                    <a>
                        <img src="{{URL::asset('./img/icon/sponsor.png')}}">
                        擅长领域：
                    </a>
                    <span>@{{detailsDataStore.cate_id[0]?detailsDataStore.cate_id[0].name:''}}</span>
                    <!-- <span>企业管理咨询</span> -->
                </div>
            </div>
            <div class="detialsRightMain_1" v-else>
                <img :src="detailsDataStore.logo">
                <p>@{{detailsDataStore.name}}</p>
                <span>该活动由平台主办</span>
            </div>
        </div>
        <div class='detailsRightMain'>
            <div class='detialsRightTitle'>
                <img src="{{URL::asset('./img/icon/recommend.png')}}">
                该类型推荐活动
            </div>
            <div class="stroreListDetails" v-for="(item,index) in RightHotAct">
                <img src="{{URL::asset('./img/activity/stroreListDetails.png')}}">
                <div>
                    <span>@{{item.title}}</span>
                    <div>
                        <p class="stroreListDetailsP">
                            <span>
                                <img src="{{URL::asset('./img/icon/eyered.png')}}">
                                @{{item.view}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/childred.png')}}">
                                @{{item.limit}}人
                            </span>
                        </p>
                        <p class="stroreListDetailsP">
                            <span>
                                <img src="{{URL::asset('./img/icon/monyred.png')}}">
                                ￥@{{item.cost}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/timered.png')}}">
                                @{{item.start_at}}
                            </span>
                        </p>
                    </div>
                </div>
                <button @click=" window.location.href = '{{ route('home.activity.actDetails') }}?cateId='+item.id+'&cid='+cid">报名</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#actdetails',
            data: () => {
                return {
                    caseId: getQueryString("cateId"),
                    cid: getQueryString("cid") || '',
                    detailsData: {},
                    detailsDataStore: {},
                    RightHotAct: []
                }
            },
            created() {
                this.getDetails();
                let dataCid = {
                    cid: this.cid
                }
                apiAjax("{{ route('home.activity.detailsRightHotActApi')}}", 'get', dataCid, (res) => {
                    if (res.code == 0) {
                        this.RightHotAct = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                getDetails() {
                    let data = {
                        id: this.caseId
                    }
                    apiAjax("{{ route('home.activity.actDetailsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.detailsData = res.data;
                            this.detailsDataStore = res.data.store;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                setCollect(storeId) {
                    let data = {
                        collect_id: storeId
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //报名验证登录
                checkLogin() {
                    let data = {}
                    apiAjax("{{ route('home.public.checkLogin')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            sessionStorage.setItem("loginBool", false)
                            if (sessionStorage.getItem("HRuserDetails")) {
                                sessionStorage.setItem("applyBool", true);
                            } else {
                                sessionStorage.setItem("loginBool", true)
                            }
                        } else {
                            sessionStorage.setItem("loginBool", true)
                        }
                    }, (erro) => {

                    });
                    // window.location.href = '{{ route('home.activity.actPay') }}'
                }
            }
        })
    })
</script>
@endsection